<!--
 * @Description: 全部商品页面组件(包括全部商品,商品分类,商品搜索)
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-08 12:11:13
 -->
<template>
	<div>
		<top-bar></top-bar>
		<top-header></top-header>
		<div class="good">
			<!--首页-->
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			</el-breadcrumb>
			<!--首页END-->
			
			<div class="bbb">
				<span style="font-size:20px;font-weight:700">
					飞行器<i :class="wireframe1" @click="show1"></i>
				</span>
					<div v-for="items in goodsList1" :key="items.id" v-show="a1">
						<ul class="bbb">
							<li :key="items.id">
								<router-link :to="{path:'/goods/details',query:{id:items.id}}">
								<img class="mainItemImg" :src="$target + items.imgPath">
								<span style="font:200;margin: 1px;height: 40px;"><br/>{{items.name}}</span>
								<span style="font:200;font-size:14px;height: 40px;color:rgb(99, 96, 96)"><br/>{{items.advantage}}</span>
								<div style="font:200;color:red;height: 40px;margin-botton:5px"><br/>{{items.price}}</div>
								</router-link>
							</li>
						</ul>
					</div>
			</div>
			<div class="bbb">
				<span style="font-size:20px;font-weight:700">
					舰船舰艇<i :class="wireframe2" @click="show2"></i>
				</span>
					<div v-for="items in goodsList2" :key="items.id" v-show="a2">
						<ul class="bbb">
							<li :key="items.id">
								<router-link :to="{path:'/goods/details',query:{id:items.id}}">
								<img class="mainItemImg" :src="$target + items.imgPath">
								<span style="font:200;margin: 1px;height: 40px;"><br/>{{items.name}}</span>
								<span style="font:200;font-size:14px;height: 40px;color:rgb(99, 96, 96)"><br/>{{items.advantage}}</span>
								<div style="font:200;color:red;height: 40px;margin-botton:5px"><br/>{{items.price}}</div>
								</router-link>
							</li>
						</ul>
					</div>
			</div>
			<div class="bbb">
				<span style="font-siz:20px;font-weight:700">坦克装甲车辆<i :class="wireframe3" @click="show3"></i></span>
					<div v-for="items in goodsList3" :key="items.id" v-show="a3">
						<ul class="bbb">
							<li :key="items.id">
								<router-link :to="{path:'/goods/details',query:{id:items.id}}">
								<img class="mainItemImg" :src="$target + items.imgPath">
								<span style="font:200;margin: 1px;height: 40px;"><br/>{{items.name}}</span>
								<span style="font:200;font-size:14px;height: 40px;color:rgb(99, 96, 96)"><br/>{{items.advantage}}</span>
								<div style="font:200;color:red;height: 40px;margin-botton:5px"><br/>{{items.price}}</div>
								</router-link>
							</li>
						</ul>
					</div>
			</div>
			<div class="bbb" @click="show4">
				<span style="font-size:20px;font-weight:700">火炮导弹<i :class="wireframe4" ></i></span>
					<div v-for="items in goodsList4" :key="items.id" v-show="a4">
						<ul class="bbb">
							<li :key="items.id">
								<router-link :to="{path:'/goods/details',query:{id:items.id}}">
								<img class="mainItemImg" :src="$target + items.imgPath">
								<span style="font:200;margin: 1px;height: 40px;"><br/>{{items.name}}</span>
								<span style="font:200;font-size:14px;height: 40px;color:rgb(99, 96, 96)"><br/>{{items.advantage}}</span>
								<div style="font:200;color:red;height: 40px;margin-botton:5px"><br/>{{items.price}}</div>
								</router-link>
							</li>
						</ul>
					</div>
			</div>
			<div class="bbb" >
				<span style="font-size:20px;font-weight:700">爆炸物<i :class="wireframe5" @click="show5"></i></span>
					<div v-for="items in goodsList5" :key="items.id" v-show="a5">
						<ul class="bbb">
							<li :key="items.id">
								<router-link :to="{path:'/goods/details',query:{id:items.id}}">
								<img class="mainItemImg" :src="$target + items.imgPath">
								<span style="font:200;margin: 1px;height: 40px;"><br/>{{items.name}}</span>
								<span style="font:200;font-size:14px;height: 40px;color:rgb(99, 96, 96)"><br/>{{items.advantage}}</span>
								<div style="font:200;color:red;height: 40px;margin-botton:5px"><br/>{{items.price}}</div>
								</router-link>
							</li>
						</ul>
					</div>
			</div>
			<div class="bbb">
				<span style="font-size:20px;font-weight:700">
					机械与单兵<i :class="wireframe6" @click="show6"></i>
				</span>
					<div v-for="items in goodsList6" :key="items.id" v-show="a6">
						<ul class="bbb">
							<li :key="items.id">
								<router-link :to="{path:'/goods/details',query:{id:items.id}}">
								<img class="mainItemImg" :src="$target + items.imgPath">
								<span style="font:200;margin: 1px;height: 40px;"><br/>{{items.name}}</span>
								<span style="font:200;font-size:14px;height: 40px;color:rgb(99, 96, 96)"><br/>{{items.advantage}}</span>
								<div style="font:200;color:red;height: 40px;margin-botton:5px"><br/>{{items.price}}</div>
								</router-link>
							</li>
						</ul>
					</div>
			</div>
		</div>
		<bottom-bar></bottom-bar>
	</div>
</template>
<script>
import BottomBar from '../components/bottom/BottomBar.vue';
import TopBar from '../components/top/TopBar.vue';
import TopHeader from '../components/top/TopHeader.vue';
export default {
	components: { TopHeader, BottomBar,TopBar,},
	name:"goods",
	data(){
		return{
			goodsList:'',
			goodsList1:'',
			goodsList2:'',
			goodsList3:'',
			goodsList4:'',
			goodsList5:'',
			goodsList6:'',
			a1:false,
			a2:false,
			a3:false,
			a4:false,
			a5:false,
			a6:false,
			isGoodsList1:false,
			isGoodsList2:false,
			isGoodsList3:false,
			isGoodsList4:false,
			isGoodsList5:false,
			isGoodsList6:false,
			wireframe1:'el-icon-caret-bottom',
			wireframe2:'el-icon-caret-bottom',
			wireframe3:'el-icon-caret-bottom',
			wireframe4:'el-icon-caret-bottom',
			wireframe5:'el-icon-caret-bottom',
			wireframe6:'el-icon-caret-bottom',
		};
	},
	created() {
		this.$axios.post("/api/menu/product/getGoodsList")
			.then((res)=>{
				this.goodsList=res.data.data;
			})
		
	},
	methods:{
		handleChange(val) {
				console.log(val);
		},
		show1(){
			if(this.isGoodsList1===false){
			this.isGoodsList1 =!this.isGoodsList1
			this.wireframe1='el-icon-caret-top'
			this.a1=!this.a1
			this.$axios.post("/api/menu/product/getGoodsList1")
				.then((res)=>{
					this.goodsList1=res.data.data;
				})
			}else{
				this.isGoodsList1 =!this.isGoodsList1
				this.wireframe1='el-icon-caret-bottom'
				this.a1=false
			}
		},	
		show2(){
			if(this.isGoodsList2===false){
			this.isGoodsList2 =!this.isGoodsList2
			this.wireframe2='el-icon-caret-top'
			this.a2=!this.a2
			this.$axios.post("/api/menu/product/getGoodsList2")
				.then((res)=>{
					this.goodsList2=res.data.data;
				})
			}else{
				this.isGoodsList2 =!this.isGoodsList2
				this.wireframe2='el-icon-caret-bottom'
				this.a2=false
			}	
		},
		show3(){
			if(this.isGoodsList3===false){
			this.isGoodsList3 =!this.isGoodsList3
			this.wireframe3='el-icon-caret-top'
			this.a3=!this.a3
			this.$axios.post("/api/menu/product/getGoodsList3")
				.then((res)=>{
					this.goodsList3=res.data.data;
				})
			}else{
				this.isGoodsList3 =!this.isGoodsList3
				this.wireframe3='el-icon-caret-bottom'
				this.a3=false
			}	
		},
		show4(){
			if(this.isGoodsList4===false){
			this.isGoodsList4 =!this.isGoodsList4
			this.wireframe4='el-icon-caret-top'
			this.a4=!this.a4
			this.$axios.post("/api/menu/product/getGoodsList4")
				.then((res)=>{
					this.goodsList4=res.data.data;
				})
			}else{
				this.isGoodsList4=!this.isGoodsList4
				this.wireframe4='el-icon-caret-bottom'
				this.a4=false
			}	
		},
		show5(){
			if(this.isGoodsList5===false){
			this.isGoodsList5 =!this.isGoodsList5
			this.wireframe5='el-icon-caret-top'
			this.a5=!this.a5
			this.$axios.post("/api/menu/product/getGoodsList5")
				.then((res)=>{
					this.goodsList5=res.data.data;
				})
			}else{
				this.isGoodsList5=!this.isGoodsList5
				this.wireframe5='el-icon-caret-bottom'
				this.a5=false
			}	
		},
		show6(){
			if(this.isGoodsList6===false){
			this.isGoodsList6 =!this.isGoodsList6
			this.wireframe='el-icon-caret-top'
			this.a6=!this.a6
			this.$axios.post("/api/menu/product/getGoodsList6")
				.then((res)=>{
					this.goodsList6=res.data.data;
				})
			}else{
				this.isGoodsList6 =!this.isGoodsList6
				this.wireframe6='el-icon-caret-bottom'
				this.a6=false
			}
		}
	},
}
</script>

<style scoped>
.good{
	margin-top: 45px;
	margin-left: 150px;
	margin-right: 150px;
}
.mainItemUl{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.mainItem:hover {
    box-shadow: 0 12px 8px rgba(191, 191, 191, .2);
    transform: translateY(-5px);
}
.mainItemImg{
    width: 100px;
    height: 150px;
}
.mainItem{
    width: 200px;
    margin: 10px;
    padding: 20px 10px;
    text-align: center;
    background-color:whitesmoke;
}
.mainItemMenu{
    margin: 20px 0;
}
.phone{
    /* 弹性布局设置 */
    display: flex;
    /* 按垂直方向排列 */
    flex-direction: column;
    justify-content: flex-start;
    /* 可多行排列 */
    flex-wrap: wrap;
    margin: 0,20px;
}
.phone1{
    float: right;
    font-size:20px;
    font-weight:700
}
.bbb{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
</style>